<template>
  <div>
    <h1 align="center">一对多模块树形结构</h1>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="序号" align="center" width="100" />
      <el-table-column prop="username" label="用户名" align="center" width="200" />
      <el-table-column prop="birthday" label="出生日期" align="center" width="200" />
      <el-table-column label="订单信息" align="center" width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.orderList && scope.row.orderList.length > 0">
            <el-tag v-for="order in scope.row.orderList" :key="order.id" size="medium" style="margin-right: 5px;">
              订单ID: {{ order.id }}, 时间: {{ order.orderTime.slice(0, 10) }}, 总额: {{ order.total }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Dep',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('http://127.0.0.1:9090/user/userList')
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data
            console.log('------', this.tableData)
          } else {
            console.error('Failed to fetch user data:', res.data.msg)
          }
        })
        .catch(error => {
          console.error('Error fetching user data:', error)
        })
    }
  }
}
</script>

<style>
/* 你的样式 */
</style>
